<template>
   <z-container>
      <z-header height="28px">Message（提示）</z-header>
      <z-main>
        <z-row :gutter="12">
          <z-col :span="3">状态</z-col>
          <z-col :span="2"><z-button @click="open('success')">成功</z-button></z-col>
          <z-col :span="2"><z-button @click="open('warning')">告警</z-button></z-col>
          <z-col :span="2"><z-button @click="open('error')">失败</z-button></z-col>
          <z-col :span="2"><z-button @click="open('info')">提示</z-button></z-col>
        </z-row>
        <z-row :gutter="12">
          <z-col :span="3">可关闭</z-col>
          <z-col :span="2"><z-button @click="open1('success')">成功</z-button></z-col>
          <z-col :span="2"><z-button @click="open1('warning')">告警</z-button></z-col>
          <z-col :span="2"><z-button @click="open1('error')">失败</z-button></z-col>
          <z-col :span="2"><z-button @click="open1('info')">提示</z-button></z-col>
        </z-row>
      </z-main>
   </z-container>
</template>
<script>
export default{
  name:'cMessage',
  data(){
    return {}
  },
  methods: {
    open(type){
      this.$message({
        message: '这是一条成功消息，会主动消失',
        type
      })
    },
    open1(type){
      this.$message({
        message: '这是一条成功消息，会主动消失',
        type,
        showClose: true
      })
    }
  },
}
</script>